import data from "./test.js";

// const colors = ["#9fe6b8", "#32c5e9", "#5eb5fc", "#1d9dff", "#8378ea", "#aa6eff", "#e7bcf3", "#fb7293", "#ff9f7f", "#ffdb5c"];

/**
 * Description - {description}
 *
 * @param {params} n          - {description}
 * @param {number} startSize  - {description}
 *
 * @returns {} - {description}
 *
 */
const drawMaskLayer = (n, startSize = 110) => {
  const res = [];

  let each = startSize / n;
  for (let i = 1; i <= n; i++) {
    let radius = `${each * i}%`;
    res.push({
      type: "gauge",
      radius,
      center: ["50%", "90%"],
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 1,
      z: 10,
      splitNumber,

      axisLine: {
        lineStyle: {
          width: 1,
          color: [[1, "#000"]],
        },
      },

      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
    });
  }

  return res;
};

const drawDataLayer = ({ data, dataColor = "blue", dataLayer = 6, backgroundColor = "white" }) => {
  let itemMax = 0;
  let itemCount = 0;
  data.forEach(item => {
    itemCount += item.value;
    if (item.value > itemMax) {
      itemMax = item.value;
    }
  });

  itemCount;

  let res = [];
  data.forEach(item => {
    let template = {
      type: "gauge",
      radius: `${(radius / layerCount) * dataLayer}%`,
      center: ["50%", "90%"],
      pointer: false,
      data: [{ value: 1 }],
      splitNumber,
      startAngle: `${180 - (180 / 100) * (item.age - data[0].age)}`,
      endAngle: `${0 - (180 / 100) * (item.age - data[0].age)}`,
      detail: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      splitLine: { show: false },
    };

    res.push(
      Object.assign(
        {
          z: 4,
          progress: {
            overlap: true,
            show: true,
            width: `${maxWidth - (maxWidth / itemMax) * item.value}`,
            itemStyle: {
              color: backgroundColor,
            },
          },
        },
        template
      ),
      Object.assign(
        {
          z: 3,
          progress: {
            overlap: true,
            show: true,
            width: maxWidth,
            itemStyle: {
              color: dataColor,
            },
          },
        },
        template
      )
    );
  });

  return res;
};

const splitLineLayer = () => {
  return {
    type: "gauge",
    z: 5,
    radius: "110%",
    center: ["50%", "90%"],
    startAngle,
    endAngle,
    min: 0,
    max: 1,
    splitNumber,

    splitLine: {
      show: true,
      length: "100%",
      distance: -10,
      lineStyle: {
        width: 1,
      },
    },

    axisLabel: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
  };
};

/* 数据标题图层 */
const labelLayer = () => {
  return {
    type: "gauge",
    radius: "110%",
    center: ["50%", "90%"],
    startAngle: 180,
    endAngle: 0,
    min: 0,
    max: 1,
    splitNumber,

    axisLabel: {
      color: "#000",
      fontSize: 16,
      distance: -60, //标题尺寸
      formatter: function (value) {
        let template = {
          0.05: "5",
          0.1: "10",
          0.15: "15",
          0.2: "20",
          0.25: "25",
          0.3: "30",
          0.35: "35",
          0.4: "40",
          0.45: "45",
          0.5: "50",
          0.55: "55",
          0.6: "60",
          0.65: "65",
          0.7: "70",
          0.75: "75",
          0.8: "80",
          0.85: "85",
          0.9: "90",
          0.95: "95",
        };

        if (template[value]) return template[value];
      },
    },
    axisTick: { show: false },
    splitLine: { show: false },
    axisLine: { show: false },
  };
};

function converData(data) {
  let res = [];
  let settings = [
    { item: "family", color: "red", layerIndex: 7 },
    { item: "worker", color: "yellow", layerIndex: 6 },
    { item: "citizen", color: "#97CE56", layerIndex: 5 },
    { item: "casual", color: "#02AC4B", layerIndex: 4 },
    { item: "student", color: "#0FA7D0", layerIndex: 3 },
    { item: "children", color: "#6A2E8E", layerIndex: 2 },
  ];

  for (let each of settings) {
    let eachData = drawDataLayer({
      data: data.filter(item => item.value[each.item] !== "").map(item => ({ age: item.age, value: parseInt(item.value[each.item]) })),
      dataColor: each.color,
      dataLayer: each.layerIndex,
    });

    res.push(...eachData);
  }

  return res;
}

const layerCount = 7;
const radius = 110;
const splitNumber = 20; // 扇形分割成多少份
const startAngle = 180;
const endAngle = 0;
const maxWidth = 47; // 数据项的最大高度，需要根据div的宽度做一个动态的计算

const maskLayer = drawMaskLayer(layerCount);
const dataLayer = converData(data);
const otherLayer = [splitLineLayer(), labelLayer()];

const option = {
  series: [
    /* 前置图层 */
    ...maskLayer,

    /* 数据 */
    ...dataLayer,

    /* 其他图层 */
    ...otherLayer,
  ],
};

export default {
  option,
};
